<template>
  <el-upload
    class="avatar-uploader"
    :data="dataObj"
    :action="this.$http.adornUrl('/sms/upload/file')"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="baseUrl+imageUrl" class="avatar" />
    <img v-else src="../../assets/default_head.png" class="avatar" />
  </el-upload>
</template>


<script>
export default {
  props: ["url", "uploadType"],
  data() {
    return {
      baseUrl:this.$http.imgUrl(''),
      imageUrl: null,
      dataObj: {},
    };
  },
  computed: {
    fileType() {
      return this.uploadType;
    },
  },
  watch: {
    url:function(newVal,val){
      console.log("####",newVal,"%%%%%",val)
      if(newVal && !val){
         this.imageUrl =newVal
      }
      if(!newVal){
          this.imageUrl = null
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res);
      if (res.url) {
        this.imageUrl = res.url;
        this.$emit("handleUpdateImg",this.imageUrl)
      }
      //   this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {

      this.dataObj.uploadType = this.fileType
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>
